<template>
  <div class="appwrap">
    <div class="head">
      <van-icon
        name="arrow-left"
        class="backbtn"
        size="30"
        @click="backclick"
      />
    </div>
    <div class="content_wrap ">
      <!-- firsticon -->

      <div class="apptitle">{{ pagedic.app_title }}</div>

      <div class="appdes">{{ pagedic.app_des }}</div>
        <img :src="firsticon" v-if="firsticon" class="firsticon" @click="imageclick" />

        <video
        v-if="pagedic.app_video"
          id="myVideo"
          ref="myVideo"
          class="video-js  vjs-default-skin  vjs-big-play-centered videoplayview"
          poster=""
        >
          <source :src="pagedic.app_video" type="video/mp4" />
        </video>

    </div>
  </div>
</template>

<script>
import datadic from '@/utils/data.js'

export default {
  data () {
    return {
      pagedic: {
        app_video: ''
      },
      firsticon: ''
    }
  },
  mounted () {
    console.log('this.$route.query: ', this.$route.query)
    const index1 = this.$route.query.index1
    const index2 = this.$route.query.index2

    this.pagedic = datadic[index1].seclist[index2]

    if (this.pagedic.app_pngarray.length > 0) {
      this.firsticon = this.pagedic.app_pngarray[0]
    }

    this.$nextTick(() => {
      if (this.pagedic.app_video) {
        this.initVideo()
      }
    })
  },
  methods: {
    imageclick () {
      this.$ImagePreview(this.pagedic.app_pngarray)
    },
    backclick () {
      this.$router.go(-1)
    },
    initVideo () {
      const myVideo = this.$refs.myVideo
      // 初始化视频方法
      this.$video(myVideo, {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        // 自动播放属性,muted:静音播放
        autoplay: false,
        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',
        // 设置视频播放器的显示宽度（以像素为单位）
        width: '300px',
        // 设置视频播放器的显示高度（以像素为单位）
        height: '400px'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// @import "assets/css/mixin.scss";

.appwrap {
  overflow-y: auto;
  width: 100vw;
  height: 100%;
  //   background: yellow;
}

$headheight: 44px;

.head {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: $headheight;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  .backbtn {
    margin-left: 15px;
  }
}
.content_wrap {
  display: flex;
  overflow-y: auto;
  align-items: center;
  flex-direction: column;
  //   width: calc(100% - #{$sideBarWidth});
  padding-top: calc(#{$headheight} + 20px);
  min-height: 100vh;
  width: 100vw;
  background-image: linear-gradient(to right, #1278f6, #00b4aa);
}

.firsticon {
  margin: 20px 0;
  width: 300px;
  height: 400px;
  background: white;

  object-fit: scale-down;
}

.apptitle {
  color: white;
  font-size: 28px;
}

.appdes {
  margin: 10px 0;
  color: white;
  font-size: 20px;
}

.videoplayview{
   margin:30px 0;
    width: 300px;
   height: 400px;

}
</style>
